<template>
	<div class="video">
		<div class="videos" v-if="Videos.length>0">
			<div class="video-item" v-for="item in Videos" :key="item.id">
				<a @click="path(item)">
					<div class="videoplayer">
						<img :src="item.shareInfo.img" class="img poster">
						<div class="video-title">{{item.shareInfo.title}}</div>
						<div class="play-but"></div>
					</div>
				</a>
				<div class="video-info">
					<div>
						<img :src="item.user.avatarurl" class="img user-avatar">
						<div class="user-nickname">{{item.user.nickName}}</div>
					</div>
					<div>
						<div class="video-praise">{{item.upCount}}</div>
						<a href="javascript:;">
							<div class="video-comment">{{item.commentCount}}</div>
						</a>
						<a href="javascript:;">
							<div class="video-share"></div>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="more" @click="showMore()" v-if="Videos.length>0">
			<div class="loader-wrap">
				<span>{{this.offset >=100? "已经到底了":"加载更多"}}</span>
			</div>
		</div>

		<van-loading size="24px" v-else class="loading">加载中...</van-loading>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Videos: [],
				offset: 0
			}
		},
		created() {
			this.getVideos()
		},
		mounted() {

		},
		methods: {
			async getVideos() {
				let re = await this.$axios.get('video/' + this.offset)
				re.feeds.forEach(item => {
					this.Videos.push(item)
				})
				// console.log(re, this.Videos)
			},
			path(item) {
				this.$store.commit("VideoObj",item)
				this.$router.push({path: '/videoinfo'})
			},

			showMore() {
				if (this.offset >= 100) {
					return
				}
				this.offset += 10;
				this.getVideos()
			},
		},
		computed: {

		}
	}
</script>

<style scoped lang="less">
	.video {
		margin-top: 50px;
		margin-bottom: 48px;
		position: relative;

		.videos {
			background-color: #f5f5f5;
		}

		.loading {
			position: absolute;
			top: 200px;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.video-item {
		margin-bottom: 6px;
		position: relative;

		.video-title {
			position: absolute;
			top: 0;
			left: 0;
			font-family: PingFangSC-Medium, serif;
			font-size: 17px;
			color: #fff;
			letter-spacing: 0;
			line-height: 24px;
			z-index: 1;
			margin: 9px 15px 19px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			word-wrap: break-word;
			word-break: break-all;
			overflow: hidden;
		}

		.video-info {
			height: 46px;
			background-color: #fff;
			padding-left: 15px;
			display: flex;
			justify-content: space-between;

			div {
				height: 100%;
				display: flex;
				align-items: center;
			}

			.user-avatar {
				width: 22px;
				height: 22px;
				border-radius: 11px;
				background: none;
			}

			.user-nickname {
				margin-left: 8px;
				font-size: 14px;
				color: #666;
			}

			.video-praise {
				background: url(../assets/img/video-praise.png) no-repeat 0;
				background-size: 18px 18px;
				padding-left: 23px;
				padding-right: 5px;
				font-size: 12px;
				height: 35px;
				line-height: 35px;
				margin-right: 26.5px;
			}

			.video-comment {
				background: url(../assets/img/video-comment.png) no-repeat 0;
				background-size: 18px 18px;
				padding-left: 23px;
				padding-right: 5px;
				font-size: 12px;
				color: #666;
				height: 35px;
				line-height: 35px;
				margin-right: 12px;
			}

			.video-share {
				background: url(../assets/img/video-share.png) no-repeat 50%;
				background-size: 18px 18px;
				width: 18px;
				height: 35px;
				padding-left: 7.5px;
				padding-right: 7.5px;
				margin-right: 7.5px;
			}
		}
	}

	.videoplayer {
		position: relative;
		height: 211px;
		overflow: hidden;
		background-color: #000;

		.poster {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			background: none;
		}

		.play-but {
			z-index: 10;
			position: absolute;
			left: 50%;
			top: 50%;
			width: 58px;
			height: 58px;
			margin-left: -29px;
			margin-top: -29px;
			background-image: url(../assets/img/video-btn-play.png);
			background-size: contain;
		}
	}

	.img {
		border: 0;
		display: inline-block;
		background: #f5f5f5 50%;
		background-size: 50%;
	}

	.more {
		line-height: 40px;
		height: 40px;
		text-align: center;
	}

	.loader-wrap {
		text-align: center;
		line-height: 40px;
	}
</style>
